<template>
  <div class="public-activity-detail">
    <h2>{{ activity.title }}</h2>
    <p>Date: {{ activity.date }}</p>
    <p>Location: {{ activity.location }}</p>
    <p>Description: {{ activity.description }}</p>
  </div>
</template>

<script>
import activities from '@/assets/activities.json';

export default {
  data() {
    return {
      activity: {}
    };
  },
  created() {
    const id = this.$route.params.id;
    this.activity = activities.find(activity => activity.id == id) || {};
  }
}
</script>

<style scoped>
.public-activity-detail {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

h2 {
  color: #42b983;
}

p {
  color: #666;
}
</style>